<template>
  <view class="fee-detail-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <u-navbar title="费用详情" back-icon="arrow-left" />
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <u-loading-icon mode="circle" size="28" color="#409EFF"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 详情内容 -->
    <scroll-view v-else-if="feeDetail && Object.keys(feeDetail).length > 0" 
                 scroll-y="true" 
                 class="detail-scroll" 
                 :style="{ height: scrollViewHeight }">
      
      <!-- 状态卡片 -->
      <view class="status-card">
        <view class="status-header">
          <view class="status-icon" :class="getStatusIconClass(feeDetail?.paymentStatus)">
            <u-icon :name="getStatusIcon(feeDetail?.paymentStatus)" color="#fff" size="24"></u-icon>
          </view>
          <view class="status-info">
            <text class="status-text">{{ getStatusText(feeDetail?.paymentStatus) }}</text>
            <text class="status-desc">{{ getStatusDescription(feeDetail?.paymentStatus) }}</text>
          </view>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="info-section">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#333"></u-icon>
          <text class="title-text">基本信息</text>
        </view>
        
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">费用类型</text>
            <text class="info-value">{{ feeDetail?.feeName || '物业费' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">计费周期</text>
            <text class="info-value">{{ feeDetail?.billingPeriod || '未指定' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">房屋地址</text>
            <text class="info-value">{{ feeDetail?.householdAddress || '未指定' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">计费方式</text>
            <text class="info-value">{{ getBillingTypeText(feeDetail?.billingType) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ formatDateTime(feeDetail?.createTime) }}</text>
          </view>
        </view>
      </view>

      <!-- 费用明细 -->
      <view class="info-section">
        <view class="section-title">
          <u-icon name="rmb-circle" size="16" color="#333"></u-icon>
          <text class="title-text">费用明细</text>
        </view>
        
        <view class="fee-details">
          <view class="fee-item">
            <text class="fee-label">应收金额</text>
            <text class="fee-value amount">¥{{ formatAmount(feeDetail?.amount) }}</text>
          </view>
          <view class="fee-item" v-if="feeDetail?.paymentAmount > 0">
            <text class="fee-label">已缴金额</text>
            <text class="fee-value paid">¥{{ formatAmount(feeDetail?.paymentAmount) }}</text>
          </view>
          <view class="fee-item" v-if="feeDetail?.paymentAmount > 0">
            <text class="fee-label">剩余金额</text>
            <text class="fee-value remaining">¥{{ formatAmount(feeDetail?.amount - feeDetail?.paymentAmount) }}</text>
          </view>
          <view class="fee-item" v-if="feeDetail?.lateFee > 0">
            <text class="fee-label">滞纳金</text>
            <text class="fee-value late-fee">¥{{ formatAmount(feeDetail?.lateFee) }}</text>
          </view>
        </view>
      </view>

      <!-- 缴费进度 -->
      <view class="info-section">
        <view class="section-title">
          <u-icon name="clock" size="16" color="#333"></u-icon>
          <text class="title-text">缴费进度</text>
        </view>
        
        <view class="progress-section">
          <view class="progress-info">
            <text class="progress-text">{{ getProgressText(feeDetail?.paymentStatus) }}</text>
            <view class="progress-bar">
              <view 
                class="progress-fill"
                :style="{ 
                  width: getProgressPercentage(feeDetail?.paymentStatus) + '%',
                  backgroundColor: getStatusColor(feeDetail?.paymentStatus)
                }"
              ></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 缴费记录 -->
      <view class="info-section" v-if="paymentRecords.length > 0">
        <view class="section-title">
          <u-icon name="list" size="16" color="#333"></u-icon>
          <text class="title-text">缴费记录</text>
        </view>
        
        <view class="payment-records">
          <view 
            v-for="record in paymentRecords" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-header">
              <text class="record-amount">¥{{ formatAmount(record.amount) }}</text>
              <u-tag 
                :text="getPaymentStatusText(record.status)" 
                :type="getPaymentStatusType(record.status)" 
                size="mini"
              />
            </view>
            <view class="record-info">
              <text class="record-time">{{ formatDateTime(record.paymentTime) }}</text>
              <text class="record-method">{{ record.paymentMethod || '未知方式' }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 缴费功能区域 -->
      <view class="payment-section" v-if="feeDetail?.paymentStatus === 0 || feeDetail?.paymentStatus === 2">
        <view class="section-title">
          <u-icon name="credit-card" size="16" color="#333"></u-icon>
          <text class="title-text">在线缴费</text>
        </view>
        
        <!-- 缴费金额输入 -->
        <view class="amount-input-section">
          <view class="amount-display">
            <text class="currency-symbol">¥</text>
            <input 
              v-model="paymentAmount"
              type="digit"
              class="amount-input"
              placeholder="请输入缴费金额"
              @input="onAmountInput"
              @blur="onAmountBlur"
            />
          </view>
          
          <view class="amount-tips">
            <text class="tip-text">可缴金额：¥{{ formatAmount(maxPaymentAmount) }}</text>
            <text class="tip-text" v-if="feeDetail?.lateFee > 0">含滞纳金：¥{{ formatAmount(feeDetail.lateFee) }}</text>
          </view>
          
          <!-- 快捷金额按钮 -->
          <view class="quick-amounts" v-if="maxPaymentAmount > 0">
            <u-button 
              v-for="amount in quickAmounts" 
              :key="amount"
              :text="`¥${amount}`"
              size="mini"
              :type="paymentAmount == amount ? 'primary' : 'info'"
              @click="selectQuickAmount(amount)"
              class="quick-btn"
            />
          </view>
        </view>

        <!-- 支付方式选择 -->
        <view class="payment-methods-section">
          <view class="methods-title">选择支付方式</view>
          <view class="payment-methods">
            <view 
              v-for="method in paymentMethods" 
              :key="method.id"
              class="method-item"
              :class="{ 'selected': selectedPaymentMethod === method.id }"
              @click="selectPaymentMethod(method.id)"
            >
              <view class="method-info">
                <u-icon :name="method.icon" :color="method.color" size="20"></u-icon>
                <text class="method-name">{{ method.name }}</text>
              </view>
              <view class="method-check">
                <u-icon 
                  :name="selectedPaymentMethod === method.id ? 'checkmark-circle' : 'circle'" 
                  :color="selectedPaymentMethod === method.id ? '#409EFF' : '#ddd'" 
                  size="20"
                ></u-icon>
              </view>
            </view>
          </view>
        </view>

        <!-- 费用明细 -->
        <view class="fee-summary">
          <view class="summary-item">
            <text class="summary-label">应付金额</text>
            <text class="summary-value">¥{{ formatAmount(feeDetail?.amount) }}</text>
          </view>
          <view class="summary-item total">
            <text class="summary-label">实付金额</text>
            <text class="summary-value">¥{{ formatAmount(actualPaymentAmount) }}</text>
          </view>
        </view>

        <!-- 协议确认 -->
        <view class="agreement-section">
          <u-checkbox-group v-model="agreementChecked">
            <u-checkbox 
              :value="true"
              shape="circle"
              active-color="#409EFF"
            >
              <text class="agreement-text">
                我已阅读并同意
                <text class="agreement-link" @click="showAgreement">《支付服务协议》</text>
              </text>
            </u-checkbox>
          </u-checkbox-group>
        </view>

        <!-- 立即缴费按钮 -->
        <view class="payment-button-section">
          <u-button 
            type="primary" 
            text="立即缴费"
            size="large"
            :disabled="!canSubmitPayment"
            :loading="submitting"
            @click="submitPayment"
            class="payment-button"
          />
        </view>
      </view>

      <!-- 底部间距 -->
      <view class="bottom-spacing"></view>
    </scroll-view>

    <!-- 空状态 -->
    <view v-else-if="!loading" class="empty-state">
      <u-empty 
        text="暂无费用详情" 
        icon="list"
        mode="list"
      />
    </view>
  </view>
</template>

<script setup>
/**
 * 物业费详情页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 3.0 - 简化页面，只保留详情展示功能
 */

import { ref, computed, onMounted, nextTick } from 'vue'
import { propertyFeeApi } from '@/api/property'
import { formatDateTime, formatAmount } from '@/utils/format'

// 页面数据
const loading = ref(false)
const feeDetail = ref(null)
const paymentRecords = ref([])

// 页面高度
const scrollViewHeight = ref('100vh')

// 缴费相关
const paymentAmount = ref(0)
const selectedPaymentMethod = ref(null)
const agreementChecked = ref([])
const submitting = ref(false)

// 快捷金额
const quickAmounts = [100, 200, 500, 1000]

// 页面加载
onMounted(() => {
  nextTick(() => {
    loadPageData()
    calculatePageHeight()
  })
})

// 计算页面高度
const calculatePageHeight = () => {
  uni.getSystemInfo({
    success: (systemInfo) => {
      const navbarHeight = 44 // 导航栏高度
      const statusBarHeight = systemInfo.statusBarHeight || 0
      const availableHeight = systemInfo.windowHeight - navbarHeight - statusBarHeight
      
      scrollViewHeight.value = `${availableHeight}px`
    }
  })
}

// 加载页面数据
const loadPageData = async () => {
  // 获取费用ID参数
  let feeId = null
  
  try {
    // 方式1: 使用getCurrentPages获取（uni-app标准方式）
    const pages = getCurrentPages()
    if (pages && pages.length > 0) {
      const currentPage = pages[pages.length - 1]
      feeId = currentPage.options?.id
    }
    
    // 方式2: 如果方式1失败，尝试从URL解析（H5环境备用方案）
    if (!feeId && typeof window !== 'undefined') {
      const url = window.location.href
      const urlMatch = url.match(/[?&]id=([^&]+)/)
      if (urlMatch) {
        feeId = urlMatch[1]
      }
    }
    
    // 开发环境显示调试信息
    if (process.env.NODE_ENV === 'development') {
      console.log('获取费用ID参数:', {
        feeId,
        url: typeof window !== 'undefined' ? window.location.href : 'N/A',
        pages: getCurrentPages()?.length || 0
      })
    }
    
    if (!feeId) {
      uni.showToast({
        title: '缺少费用ID参数',
        icon: 'none'
      })
      return
    }
  } catch (error) {
    // 开发环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      console.error('获取费用ID参数失败:', error)
    }
    uni.showToast({
      title: '参数获取失败',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  try {
    await Promise.all([
      loadFeeDetail(feeId),
      loadPaymentRecords(feeId)
    ])
    
    // 数据加载完成后重新计算页面高度
    nextTick(() => {
      calculatePageHeight()
    })
  } catch (error) {
    // 开发环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      console.error('加载页面数据失败:', error)
    }
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 加载费用详情
const loadFeeDetail = async (feeId) => {
  try {
    const response = await propertyFeeApi.getFeeDetail(feeId)
    if (response && response.data) {
      feeDetail.value = response.data
    }
  } catch (error) {
    // 开发环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      console.error('加载费用详情失败:', error)
    }
    throw error
  }
}

// 加载缴费记录
const loadPaymentRecords = async (feeId) => {
  try {
    const response = await propertyFeeApi.getPaymentRecords(feeId)
    if (response && response.data) {
      paymentRecords.value = response.data
    }
  } catch (error) {
    // 开发环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      console.error('加载缴费记录失败:', error)
    }
    throw error
  }
}

// 状态相关方法
const getStatusIconClass = (status) => {
  const classMap = {
    0: 'status-unpaid',
    1: 'status-partial',
    2: 'status-paid',
    3: 'status-overdue'
  }
  return classMap[status] || 'status-unpaid'
}

const getStatusIcon = (status) => {
  const iconMap = {
    0: 'clock',
    1: 'checkmark-circle',
    2: 'checkmark-circle',
    3: 'close-circle'
  }
  return iconMap[status] || 'clock'
}

const getStatusText = (status) => {
  const textMap = {
    0: '未缴费',
    1: '部分缴费',
    2: '已缴费',
    3: '已逾期'
  }
  return textMap[status] || '未知状态'
}

const getStatusDescription = (status) => {
  const descMap = {
    0: '请及时缴费，避免产生滞纳金',
    1: '部分费用已缴纳，可继续缴费',
    2: '费用已全部缴纳完成',
    3: '费用已逾期，请尽快缴费'
  }
  return descMap[status] || ''
}

const getStatusColor = (status) => {
  const colorMap = {
    0: '#ff9500',
    1: '#409EFF',
    2: '#67c23a',
    3: '#f56c6c'
  }
  return colorMap[status] || '#ff9500'
}

const getBillingTypeText = (type) => {
  const typeMap = {
    1: '按面积计费',
    2: '按户计费',
    3: '按人数计费'
  }
  return typeMap[type] || '未指定'
}

const getProgressText = (status) => {
  const progressMap = {
    0: '待缴费',
    1: '部分缴费',
    2: '缴费完成',
    3: '已逾期'
  }
  return progressMap[status] || '未知进度'
}

const getProgressPercentage = (status) => {
  if (!feeDetail.value) return 0
  
  const total = feeDetail.value.amount
  const paid = feeDetail.value.paymentAmount || 0
  
  if (total <= 0) return 0
  if (status === 2) return 100 // 已缴费
  if (status === 1) return Math.round((paid / total) * 100) // 部分缴费
  return 0 // 未缴费或逾期
}

const getPaymentStatusText = (status) => {
  const statusMap = {
    1: '支付成功',
    2: '支付失败',
    3: '处理中'
  }
  return statusMap[status] || '未知状态'
}

const getPaymentStatusType = (status) => {
  const typeMap = {
    1: 'success',
    2: 'error',
    3: 'warning'
  }
  return typeMap[status] || 'info'
}

// 支付相关计算属性
const maxPaymentAmount = computed(() => {
  if (!feeDetail.value) return 0
  return feeDetail.value.amount - (feeDetail.value.paymentAmount || 0)
})

const actualPaymentAmount = computed(() => {
  return paymentAmount.value
})

const canSubmitPayment = computed(() => {
  return paymentAmount.value > 0 &&
         selectedPaymentMethod !== null &&
         agreementChecked.value.length > 0 &&
         paymentAmount.value <= maxPaymentAmount.value
})



// 支付方法
const paymentMethods = [
  { id: 'alipay', name: '支付宝', icon: 'alipay', color: '#1677FF' },
  { id: 'wechat', name: '微信支付', icon: 'wechat', color: '#2DCB56' },
  { id: 'bank', name: '银行卡支付', icon: 'credit-card', color: '#FF9500' },
  { id: 'cash', name: '现金支付', icon: 'cash', color: '#67C23A' },
  { id: 'other', name: '其他方式', icon: 'more-circle', color: '#909399' }
]

// 快捷金额选择
const selectQuickAmount = (amount) => {
  paymentAmount.value = amount
}

// 支付方式选择
const selectPaymentMethod = (methodId) => {
  selectedPaymentMethod.value = methodId
}

// 金额输入处理
const onAmountInput = (e) => {
  const value = e.detail.value
  if (value === '') {
    paymentAmount.value = 0
  } else {
    paymentAmount.value = parseFloat(value)
  }
}

const onAmountBlur = () => {
  if (paymentAmount.value < 0) {
    paymentAmount.value = 0
  }
}

// 协议确认
const showAgreement = () => {
  uni.showModal({
    title: '支付服务协议',
    content: '本协议是您与支付服务提供者之间的法律协议。请仔细阅读并同意。',
    showCancel: false,
    confirmText: '同意',
    success: (res) => {
      if (res.confirm) {
        agreementChecked.value = [true]
      }
    }
  })
}

// 提交支付
const submitPayment = async () => {
  if (!canSubmitPayment.value) {
    uni.showToast({
      title: '请检查输入信息',
      icon: 'none'
    })
    return
  }

  submitting.value = true
  try {
    const paymentData = {
      feeId: feeDetail.value.id,
      amount: actualPaymentAmount.value,
      paymentMethod: selectedPaymentMethod.value,
      paymentStatus: 1, // 支付中
      paymentTime: new Date().toISOString(),
      remark: '在线缴费'
    }

    const response = await propertyFeeApi.createPaymentRecord(paymentData)
    if (response && response.data) {
      uni.showToast({
        title: '缴费成功',
        icon: 'success'
      })
      // 刷新缴费记录
      await loadPaymentRecords(feeDetail.value.id)
      // 刷新费用详情
      await loadFeeDetail(feeDetail.value.id)
      // 刷新页面状态
      feeDetail.value.paymentAmount = actualPaymentAmount.value
      feeDetail.value.paymentStatus = 1 // 支付中
    }
  } catch (error) {
    // 开发环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      console.error('提交支付失败:', error)
    }
    uni.showToast({
      title: '缴费失败，请重试',
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.fee-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 16px;
}

.loading-text {
  color: #666;
  font-size: 14px;
}

.detail-scroll {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* 状态卡片 */
.status-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.status-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-icon.status-unpaid {
  background-color: #ff9500;
}

.status-icon.status-partial {
  background-color: #409EFF;
}

.status-icon.status-paid {
  background-color: #67c23a;
}

.status-icon.status-overdue {
  background-color: #f56c6c;
}

.status-info {
  flex: 1;
}

.status-text {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.status-desc {
  display: block;
  font-size: 14px;
  color: #666;
}

/* 信息区域 */
.info-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 信息列表 */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 14px;
}

.info-value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 费用明细 */
.fee-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.fee-item:last-child {
  border-bottom: none;
}

.fee-label {
  color: #666;
  font-size: 14px;
}

.fee-value {
  font-size: 16px;
  font-weight: 600;
}

.fee-value.amount {
  color: #333;
}

.fee-value.paid {
  color: #67c23a;
}

.fee-value.remaining {
  color: #409EFF;
}

.fee-value.late-fee {
  color: #f56c6c;
}

/* 进度条 */
.progress-section {
  margin-top: 8px;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-text {
  font-size: 14px;
  color: #666;
}

.progress-bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 缴费记录 */
.payment-records {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.record-amount {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.record-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-method {
  font-size: 12px;
  color: #666;
}



/* 缴费功能区域 */
.payment-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.amount-input-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.amount-display {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 10px;
  height: 40px;
  background-color: #f9f9f9;
}

.currency-symbol {
  font-size: 18px;
  color: #333;
  margin-right: 4px;
}

.amount-input {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  background-color: transparent;
  border: none;
  padding: 0;
  text-align: right;
}

.amount-tips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick-btn {
  flex: 1;
  min-width: 80px;
  text-align: center;
}

.payment-methods-section {
  margin-bottom: 20px;
}

.methods-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.method-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.method-item:hover {
  border-color: #409EFF;
  background-color: #eef7ff;
}

.method-item.selected {
  border-color: #409EFF;
  background-color: #eef7ff;
}

.method-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.method-name {
  font-size: 14px;
  color: #333;
}

.method-check {
  flex-shrink: 0;
}

.fee-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.summary-label {
  font-size: 14px;
  color: #666;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.summary-item.total {
  align-items: flex-start;
}

.agreement-section {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}

.agreement-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.agreement-link {
  color: #409EFF;
  text-decoration: underline;
  cursor: pointer;
}

.payment-button-section {
  margin-top: 20px;
}

.payment-button {
  width: 100%;
}

/* 底部间距 */
.bottom-spacing {
  height: 32px;
}

/* 空状态 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-scroll {
    padding: 12px;
  }
  
  .info-section {
    padding: 16px;
  }
  
  .status-card {
    padding: 16px;
  }
}
</style>
